<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    #div {
      width: 100%;
    }
    p{
    	width: 100%;
    	height: 100px;
    	line-height: 100px;
    }
    p:nth-child(2n+1) {
      background: #ccc;
    }
    p:nth-child(2n) {
      background: #999;
    }
    p:nth-child(1){
    	margin-top: 0px;
    }
    p:nth-child(2){
    	margin-top: 500px;
    }
  </style>
</head>

<body>
  <div id="div">
  </div>
  <div class="asd" style="width: 200px;height: 100px;background: #ccc;"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	let arr=['1','2']
	let str=''
	arr.map(a=>{
		str+='<p>'+a+'</p>'
	})
	$('#div').append(str)
	$('.asd').slideUp('slow')
	
	$('#div').on('click','p',function(){
		if($(this).html()==='2'){
			$(this).animate({ marginTop: 0 }, 1000 , function () {
				$(this).css("margin-top", '0')
				$(this).siblings().eq(0).animate({opacity:0},800).slideUp(800)
       })
		}
	})
</script>
</html>